<template>
	<view class="content">
		<view class="bgColor">
			<image src="/static/home/homeBg.png" mode=""></image>
		</view>
		<cusHeaderVue titleContent="小润动销" :showBack="false"></cusHeaderVue>
		<view class="contBox" :style="{paddingTop: `calc(${scrollerHeight} + 100rpx)`}">
			<view class="tabNav">
				<view class="tabNavLi"  @click="toUrl('/pages/index/salesRepresentative?mode=day')" v-if="userType !=0">
					<image src="/static/home/dddk.png" mode=""></image>
					<view class="tabNavName">
						打卡统计
					</view>
				</view>
				<view class="tabNavLi" @click="toUrl('/pages/index/checkInStore')" v-if="userType ==0">
					<image src="/static/home/dddk.png" mode=""></image>
					<view class="tabNavName">
						到店打卡
					</view>
				</view>
				<view class="tabNavLi" @click="toUrl('/pages/mine/myStore')">
					<image src="/static/home/fzmd.png" mode=""></image>
					<view class="tabNavName">
						负责门店
					</view>
				</view>
				<view class="tabNavLi" @click="toUrl('/pages/mine/marketLook')">
					<image src="/static/home/xskb.png" mode=""></image>
					<view class="tabNavName">
						销售看板
					</view>
				</view>
				<view class="tabNavLi" @click="toUrl('/pages/index/cultivateHome')">
					<image src="/static/home/pxzx.png" mode=""></image>
					<view class="tabNavName">
						培训中心
					</view>
				</view>
			</view>
			<view class="latelyNews">
				<view class="latelyNewsTop">
					<view class="latelyNewsTit">
						最近消息
					</view>
					<view class="latelyNewsRight" v-if="unreadCount != 0">
						<view class="latelyNewsNum">
							{{unreadCount}}条
						</view>
						<view class="latelyNewsWd">
							未读
						</view>
					</view>
				</view>
				<!-- 订阅消息示例按钮 -->
				<!-- <view class="subscribe-btn" v-if="showSubscribeBtn" @click="handleSubscribeMessage">
					订阅消息通知
				</view> -->
				<view class="latelyNewsBottom" @click="toMessageDetail(zhanXinList,index)">
					<view class="latelyNewsBottomCont">
						<view v-if="zhanXinList.length !=0" class="latelyNewsBottomLeft"
							v-for="(item,index) in zhanXinList" :key="index">
							<view class="latelyNewsLeft">
								<view class="latelyNewsLeftD">

								</view>
								<view class="latelyNewsLeftText">
									{{item.templateContent}}
								</view>
							</view>
							<view class="latelyNewsRight">
								{{item.xxx}}
							</view>
						</view>
						<view v-else class="no-data-tip">
							暂无未读消息
						</view>
					</view>

					<u-icon name="arrow-right" color="#7F8494" size="16" @click.stop="toSwchtab('/pages/message/message')"></u-icon>
				</view>
			</view>
			<view v-if="userType !=0">
				<view class="todaySummary">
					<view class="todaySummaryTit">
						今日汇总
					</view>
					<view class="todaySummaryCont">
						<view class="todaySummaryLi" @click="toUrl('/pages/index/salesRepresentative?mode=day')">
							<view class="todaySummaryNum">
								{{userSummary.dkNum}}<text>次</text>
							</view>
							<view class="todaySummaryName">
								打卡次数
							</view>
						</view>
						<view class="todaySummaryLi" @click="toUrl('/pages/index/didStore')">
							<view class="todaySummaryNum todaySummaryNumA">
								{{userSummary.wpNum}}<text>人</text>
							</view>
							<view class="todaySummaryName">
								未跑店
							</view>
						</view>
					</view>
				</view>
				<view class="todaySummary todaySummaryA">
					<view class="todaySummaryTit">
						本月汇总
					</view>
					<view class="todaySummaryCont">
						<view class="todaySummaryLi" @click="toUrl('/pages/mine/myTask')">
							<view class="todaySummaryNum todaySummaryNumA">
								{{userSummary.dbNum}}<text>个</text>
							</view>
							<view class="todaySummaryName">
								待办任务
							</view>
						</view>
						<view class="todaySummaryLi" @click="toUrl('/pages/mine/didNotClockIn')">
							<view class="todaySummaryNum todaySummaryNumA">
								{{userSummary.wdkNum}}<text>家</text>
							</view>
							<view class="todaySummaryName">
								未打卡门店
							</view>
						</view>
						
						<view class="todaySummaryLi" @click="toUrl('/pages/mine/marketLook')">
							<view class="todaySummaryNum">
								{{ (userSummary.totalSaleMoney / 10000).toFixed(2) }}<text>万元</text>
							</view>
							<view class="todaySummaryName">
								销售总额
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="mapBox" style="flex: 1;" v-else>
				<map id="myMap" @markertap="onMarkerTap" @tap="handleMapTap"
					:style="{height:swiperHeight,width:mapWidth}" :latitude="latitude" :longitude="longitude"
					:markers="markers">
				</map>

				<!-- 自定义气泡（使用 cover-view） -->
				<cover-view v-if="showCallout" class="custom-callout" catchtap>
					<cover-view class="callout-content">
						<cover-view class="title" catchtap>
							<cover-image src="/static/home/shopIcon.png" class="callout-Shop" catchtap />
							{{currentMarker.title}}
						</cover-view>
						<cover-view class="descCont" catchtap>
							<cover-view class="desc" catchtap>{{currentMarker.address || '暂无地址信息'}}</cover-view>
							<cover-view class="dh-btn" @tap="navigateToShop" catchtap>
								<cover-image src="/static/home/daohang.png" class="callout-Dh" catchtap />
								导航
							</cover-view>
						</cover-view>
					</cover-view>
				</cover-view>

				<view class="shopMsgBox">
					<view class="shopMsgBoxLeft">
						今日推荐门店
						<view class="shopMsgNum">
							{{ shopList.length }}家
						</view>
					</view>
					<view class="shopMsgBoxRight" @click="toggleTypeSelector">
						{{ typeOptions.find(opt => opt.value === searchType)?.label || '智能推荐' }}
						<view class="shopMsgBoxBotom">
							<u-icon name="arrow-down" color="#5E606F" size="10"></u-icon>
						</view>
					</view>
					<!-- 搜索类型选择弹窗 -->
					<view v-if="showTypeSelector" class="typeSelector">
						<cover-view v-for="option in typeOptions" :key="option.value" class="typeOption"
							@click="selectType(option.value)">
							{{ option.label }}
							<u-icon v-if="searchType === option.value" name="<" color="#07c160" size="10"></u-icon>
						</cover-view>
					</view>
				</view>
				<view class="mapBtnClick">
					<view class="mapBtnClickLi" @click="toUrl('/pages/index/shopMap')">
						<image src="/static/home/kuo.png" mode=""></image>
					</view>
					<view class="mapBtnClickLi">
						<image src="/static/home/mywz.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import cusHeaderVue from '@/components/cus-header.vue';
	import {
		ref,
		onMounted,
		reactive,
		getCurrentInstance
	} from 'vue';
	import {
		onLoad,
		onShow,
		onPullDownRefresh
	} from '@dcloudio/uni-app';

	import {
		authLogin,
		updateGuestPassword,
		verifyGesturePassword,
		updateUserPassword,
		GETUserInfo,
		GETUnreadNotifyList,
		getZhanXinForPage,
		GETBandShop,
		putUpdateSetRead,
		GETUserSummary

	} from '@/api/interface.js';

	const userSummary = ref({});

	// 订阅消息相关
	const showSubscribeBtn = ref(true); // 临时默认显示，方便调试
	//用户类型
	const userType = ref(0);



	const scrollerHeight = ref('');
	const latitude = ref('39.909');
	const longitude = ref('116.39742');
	const mapHeight = ref(0);
	const swiperHeight = ref(0);
	const mapWidth = ref('100%');

	// 搜索类型相关
	const searchType = ref('0'); // 默认智能推荐
	const showTypeSelector = ref(false);
	const typeOptions = [{
			label: '智能推荐',
			value: '0'
		},
		{
			label: '距离优先',
			value: '1'
		},
		{
			label: '销量优先',
			value: '2'
		},
		{
			label: '优质门店',
			value: '3'
		},
		{
			label: '未跑动',
			value: '4'
		}
	];

	const activeMarker = ref(null)
	const zhanXinList = ref([])
	const shopList = ref([]); // 存储门店列表数据

	// 气泡控制
	const showCallout = ref(false);
	const currentMarker = ref({});
	const unreadCount = ref(0);
	const calloutStyle = reactive({
		left: 0,
		top: 0
	});
	// 标记点点击标志，用于防止地图点击事件隐藏气泡
	const markerJustClicked = ref(false);


	// 获取门店数据
	const fetchShopData = () => {
		// 获取当前位置
		uni.getLocation({
			type: 'gcj02',
			success: (res) => {
				latitude.value = res.latitude;
				longitude.value = res.longitude;

				// 调用接口获取门店数据
				GETBandShop({
					longitude: res.longitude.toString(),
					latitude: res.latitude.toString(),
					searchType: searchType.value
				}).then(res => {
					console.log('门店数据:', res.data);
					// 处理返回的门店数据，更新地图标记
					if (res.data && res.data.length > 0) {
						shopList.value = res.data;
						// 更新地图标记
						updateMapMarkers(res.data);
					}
				}).catch(err => {
					console.error('获取门店数据失败:', err);
				});
			},
			fail: (err) => {
				console.error('获取位置失败:', err);
				// 使用默认位置调用接口
				GETBandShop({
					longitude: longitude.value.toString(),
					latitude: latitude.value.toString(),
					searchType: searchType.value
				}).then(res => {
					console.log('使用默认位置获取门店数据:', res.data);
					if (res.data && res.data.length > 0) {
						shopList.value = res.data;
						updateMapMarkers(res.data);
					}
				});
			}
		});
	};

	// 更新地图标记
	const updateMapMarkers = (data) => {
		markers.value = data.map((shop, index) => ({
			id: shop.id || index + 1,
			latitude: parseFloat(shop.latitude),
			longitude: parseFloat(shop.longitude),
			title: '__'+ shop.name || '门店',
			address: shop.address || '', // 存储地址信息
			iconPath: '/static/home/zuobiao.png',
			width: 30,
			height: 40,
			callout: {
				content: shop.name || '门店信息',
				color: '#ffffff',
				bgColor: '#4a6491',
				padding: 10,
				borderRadius: 5,
				display: 'ALWAYS'
			},
			customCallout: {
				anchorY: 0,
				display: 'ALWAYS'
			}
		}));

		// 默认显示第一个点的气泡并移动地图到第一个点
		if (markers.value.length > 0) {
			currentMarker.value = markers.value[0];
			showCallout.value = true;
			// 移动地图中心点到第一个标记点
			latitude.value = markers.value[0].latitude;
			longitude.value = markers.value[0].longitude;
		}
	};

	// 切换搜索类型
	const toggleTypeSelector = () => {
		showTypeSelector.value = !showTypeSelector.value;
	};

	// 选择搜索类型
	const selectType = (type) => {
		searchType.value = type;
		showTypeSelector.value = false;
		fetchShopData(); // 重新获取数据
	};

	// 页面加载
	onLoad(() => {
		getUser();
		getZhanXin();
		fetchShopData(); // 加载门店数据
		getBarHeight();
		// getUserSummary();
	});

	// 页面加载
	onShow(() => {
		// 登录后在首页清除手势相关标记，避免前台返回触发手势重定向
		uni.removeStorageSync('gestureEnabled');
		uni.removeStorageSync('gestureVerified');
		getZhanXin();
	});

	// 下拉刷新
	onPullDownRefresh(() => {
		console.log('下拉刷新触发');
		fetchShopData();
		getZhanXin();
		// 刷新完成后停止下拉刷新动画
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
	});
	// 工具函数：将时间戳转换为“几小时前/几天前”等描述
	function formatRelativeTime(timestamp) {
		// 支持秒或毫秒时间戳：如果小于 1e10，认为是秒，需转为毫秒
		const timeInMs = timestamp < 1e10 ? timestamp * 1000 : timestamp;
		const now = Date.now();
		const diff = now - timeInMs;

		if (diff < 0) return '未来'; // 可选处理

		const seconds = Math.floor(diff / 1000);
		const minutes = Math.floor(seconds / 60);
		const hours = Math.floor(minutes / 60);
		const days = Math.floor(hours / 24);
		const years = Math.floor(days / 365);

		if (years > 0) {
			return `${years}年前`;
		}
		if (days > 0) {
			return `${days}天前`;
		}
		if (hours > 0) {
			return `${hours}小时前`;
		}
		if (minutes > 0) {
			return `${minutes}分钟前`;
		}
		return '刚刚';
	}
	const getZhanXin = (e) => {
		GETUnreadNotifyList({
			pageNo: 1,
			pageSize: 100
		}).then(res => {
			console.log('get-unread-list接口返回数据:', res.data);
			// 确保res.data是数组
			if (!Array.isArray(res.data)) {
				console.error('返回数据格式错误，data不是数组');
				zhanXinList.value = [];
				return;
			}

			// 计算未读消息数量
			unreadCount.value = res.data.filter(item => item.readStatus === false).length;
			console.log("未读条数:", unreadCount.value);
			if(unreadCount.value >=99){
				unreadCount.value = '99+'
			}
			// 处理每条消息，添加相对时间
			res.data.forEach(item => {
				const timeField = item.createTime;
				if (timeField != null) {
					item.xxx = formatRelativeTime(timeField);
				} else {
					item.xxx = '未知时间';
				}
			});

			// 按时间降序排序，获取最新的两条消息
			const sortedData = [...res.data].sort((a, b) => {
				const timeA = (a.createTime < 1e10 ? a.createTime * 1000 : a.createTime) || 0;
				const timeB = (b.createTime < 1e10 ? b.createTime * 1000 : b.createTime) || 0;
				return timeB - timeA;
			});

			const topTwo = sortedData.slice(0, 2);
			zhanXinList.value = topTwo;
			console.log('显示的消息列表:', topTwo);
		}).catch(err => {
			console.error('获取未读消息失败:', err);
			zhanXinList.value = [];
		})
	}

	const getUserSummary = () => {
		GETUserSummary().then(res => {
			userSummary.value = res.data
		})
	}

	const getUser = (e) => {

		GETUserInfo({}).then(res => {
			userType.value = res.data.userType
			if (res.data.userType != 0) {
				getUserSummary();
			}
			uni.setStorageSync("userInfo", res.data)
		}).catch(err => {

		});
	}


	// 原始标记数据
	const markers = ref([{
		id: 1,
		latitude: 39.908823,
		longitude: 116.397470,
		title: '天安门广场',
		iconPath: '/static/home/zuobiao.png',
		width: 30,
		height: 30,
		callout: {
			content: '天安门广场\n点击查看详情',
			color: '#ffffff',
			bgColor: '#4a6491',
			padding: 10,
			borderRadius: 5,
			display: 'ALWAYS'
		},
		customCallout: {
			anchorY: 0,
			display: 'ALWAYS'
		}
	}, {
		id: 2,
		latitude: 39.907641,
		longitude: 116.397228,
		title: '人民大会堂',
		iconPath: '/static/home/zuobiao.png',
		width: 30,
		height: 30,
		callout: {
			content: '天安门广场\n点击查看详情',
			color: '#ffffff',
			bgColor: '#4a6491',
			padding: 10,
			borderRadius: 5,
			display: 'ALWAYS'
		},
		customCallout: {
			anchorY: 0,
			display: 'ALWAYS'
		}
	}, ])


	// 点击 marker
	const onMarkerTap = (e) => {
		const markerId = e.detail.markerId;
		console.log(markerId)
		console.log(markers.value)

		const marker = markers.value.find(m => m.id === markerId);
		if (marker) {
			console.log(currentMarker.value.id, marker.id)
			// 设置标记点点击标志，防止地图点击事件隐藏气泡
			markerJustClicked.value = true;
			// 清除任何可能的隐藏超时
			if (hideTimeout.value) {
				clearTimeout(hideTimeout.value);
			}
			// 直接设置为显示状态
			currentMarker.value = marker;
			showCallout.value = true;

			// 500ms后重置标记点点击标志
			setTimeout(() => {
				markerJustClicked.value = false;
			}, 500);
		}
	}


	//去跳转详情
	const toMessageDetail = (messages) => {
		// 检查messages是否为数组且有元素
		if (!messages || !Array.isArray(messages) || messages.length === 0) {
			console.error('消息数据无效');
			return;
		}

		// 获取第一条消息（当前显示的消息）
		const messageItem = messages[0];

		// 设置消息已读
		putUpdateSetRead({
			id: messageItem.id
		}).then(res => {
			// 更新当前显示列表中的消息状态
			const index = zhanXinList.value.findIndex(msg => msg.id === messageItem.id);
			if (index !== -1) {
				zhanXinList.value[index].readStatus = true;
				// 重新计算当前显示列表的未读数量
				unreadCount.value = zhanXinList.value.filter(msg => msg.readStatus === false).length;
			}
		});

		console.log('跳转到消息详情', messageItem);

		// 根据messageType判断跳转逻辑
		if (messageItem.messageType === 1) {
			// OA审批跳转到OA审批中心
				uni.navigateTo({ url: '/pages/examine/examineXq?processInstanceId=' + messageItem.linkId });
		} else if (messageItem.messageType === 2 || messageItem.messageType === 3) {
			// 预警(messageType=2)和通知(messageType=3)跳转到通知详情页面
			// 存储完整消息对象到本地，供详情页渲染使用
			uni.setStorageSync('messageItem', messageItem);
			uni.navigateTo({
				url: `/pages/message/messageXq?id=${messageItem.id}`
			});
		}
	};

	// 隐藏气泡
	const hideTimeout = ref(null);

	const hideCallout = () => {
		// 延迟隐藏，避免与标记点点击事件冲突
		if (hideTimeout.value) {
			clearTimeout(hideTimeout.value);
		}
		hideTimeout.value = setTimeout(() => {
			showCallout.value = false;
		}, 100);
	};

	// 处理地图点击事件
	const handleMapTap = (e) => {
		// 如果最近点击了标记点，则不隐藏气泡
		if (markerJustClicked.value) {
			return;
		}
		// 清除任何可能的隐藏超时
		if (hideTimeout.value) {
			clearTimeout(hideTimeout.value);
		}
	}

	// 导航到门店
	const navigateToShop = () => {
		if (currentMarker.value) {
			uni.openLocation({
				latitude: currentMarker.value.latitude,
				longitude: currentMarker.value.longitude,
				name: currentMarker.value.title,
				address: currentMarker.value.address || '',
				scale: 18
			});
		}
	};



	//获取状态栏高度
	const getBarHeight = () => {
		uni.getSystemInfo({
			success: function(resu) {
				scrollerHeight.value = resu.statusBarHeight + 'px'
				// resu 可以获取当前屏幕的高度
				const query = uni.createSelectorQuery();
				query.select('.mapBox').boundingClientRect(); //.swiper是swiper类名，获取当前swiper距离顶部的位置
				query.exec(res => {
					swiperHeight.value = resu.windowHeight - res[0].top - resu.safeAreaInsets
						.bottom - resu.statusBarHeight - 30 +
						'px'; //屏幕的高度减去当前swiper距离顶部的高度就是剩余屏幕的高度 然后动态赋值给swiper
				});
			}
		});
	}


	const toUrl = (data) => {
		console.log(data, 'data')
		uni.navigateTo({
			url: data
		})
	}
	const toSwchtab = (data) => {
		console.log(data, 'data')
		uni.switchTab({
			url: data
		})
	}
</script>

<style lang="scss" scoped>
	.bgColor {
		width: 750rpx;
		height: 597.44rpx;
		position: absolute;
		z-index: -1;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.contBox {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.content {
		display: flex;
		flex-direction: column;
		height: 100vh;
	}

	.tabNav {
		display: flex;
		align-items: center;
		justify-content: space-around;

		.tabNavLi {
			text-align: center;

			image {
				width: 91.03rpx;
				height: 91.03rpx;
			}

			.tabNavName {
				font-weight: 500;
				font-size: 26.92rpx;
				text-align: center;
				color: #121419;
			}
		}
	}

	.latelyNews {
		width: 703.85rpx;
		border-radius: 12.82rpx 12.82rpx 12.82rpx 12.82rpx;
		background: #ffffff;
		box-shadow: 0 0 31.41rpx 0 #0915541c;
		margin: 33.97rpx auto 0;
		padding: 27rpx 33rpx 35rpx;
		box-sizing: border-box;

		.latelyNewsTop {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.latelyNewsTit {
				font-weight: 500;
				font-size: 33.33rpx;
				color: #1C2027;
			}

			.latelyNewsRight {
				display: flex;
				background: url('/static/home/wdxx.png') no-repeat center;
				background-size: 100% 100%;
				width: 137.5rpx;
				height: 39.6rpx;

				.latelyNewsNum {
					width: 68.75rpx;
					font-size: 21.79rpx;
					font-weight: 400;
					color: #FFFFFF;
					text-align: center;
				}

				.latelyNewsWd {
					font-size: 21.79rpx;
					font-weight: 400;
					color: #FFFFFF;
					width: 68.75rpx;
					text-align: center;
				}
			}
		}

		.latelyNewsBottom {
			width: 100%;
			// height: 128.21rpx;
			border-radius: 12.82rpx 12.82rpx 12.82rpx 12.82rpx;
			background: #f4f6f9;
			margin-top: 13.6rpx;
			padding: 27rpx 25rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;

			.latelyNewsBottomCont {
				flex: 1;
				margin-right: 29rpx;
			}

			.latelyNewsBottomLeft {
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex: 1;
				line-height: 48.72rpx;

				.latelyNewsLeft {
					display: flex;
					align-items: center;

					.latelyNewsLeftD {
						width: 7.69rpx;
						height: 7.69rpx;
						background: #fb992e;
						border-radius: 50%;
					}

					.latelyNewsLeftText {
						color: #222222;
						font-weight: 400;
						font-size: 24.36rpx;
						margin-left: 12.18rpx;
						/* 关键：单行省略 */
						white-space: nowrap;
						/* 禁止换行 */
						overflow: hidden;
						/* 超出隐藏 */
						text-overflow: ellipsis;
						/* 溢出部分显示省略号 */
					}
				}

				.latelyNewsRight {
					color: #7f8494;
					font-weight: 400;
					font-size: 24.36rpx;
				}
			}
		}
	}

	.todaySummary {
		width: 703.85rpx;
		border-radius: 12.82rpx 12.82rpx 12.82rpx 12.82rpx;
		background: linear-gradient(0deg, #ffffff, #e0efff);
		box-shadow: 0 0 31.41rpx 0 #0915541c;
		margin: 23.08rpx auto 0;
		padding: 28rpx 32rpx;
		box-sizing: border-box;

		.todaySummaryTit {
			font-weight: 500;
			font-size: 33.33rpx;
			color: #1C2027;
		}

		.todaySummaryCont {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			/* 三等份列 */
			gap: 20rpx;
			align-items: center;
			margin-top: 39rpx;

			.todaySummaryLi {
				.todaySummaryNum {
					font-size: 43.59rpx;
					font-weight: 400;
					color: #222222;

					text {
						font-size: 23.08rpx;
						margin-left: 7rpx;
					}
				}

				.todaySummaryNumA {
					color: #FB3D3F;
				}

				.todaySummaryName {
					font-size: 23.08rpx;
					font-weight: 400;
					color: #7F8494;
				}
			}
		}
	}

	.todaySummaryA {
		background: linear-gradient(0deg, #ffffff, #faf4ec);
		box-shadow: 0 0 31.41rpx 0 #0915541c;
	}

	.mapBox {
		position: relative;
	}

	/* 搜索类型选择器样式 */
	.typeSelector {
		position: absolute;
		/* 改为在容器底部下方弹出，并靠右对齐 */
		top: calc(100% + 10rpx);
		right: 30rpx;
		left: auto;
		min-width: 180rpx;
		max-width: 280rpx;
		background: #ffffff;
		border-radius: 10rpx;
		box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.12);
		z-index: 9000;
		padding: 6rpx 0;
		border: 1rpx solid #f0f2f5;
	}

	.typeOption {
		z-index: 9000;

		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 18rpx 24rpx; /* 更小的点击区域 */
		font-size: 26rpx; /* 字号略小 */
		color: #1C2027;
		line-height: 1.4; /* 文本行距更舒适 */
	}

	.typeOption + .typeOption {
		border-top: 1rpx solid #f5f6f8; /* 选项间细分隔线 */
	}

	.typeOption:active {
		background-color: #f7f9fc; /* 更清淡的按下色 */
	}

	/* 图标与文字贴合更紧凑 */
	.typeOption .u-icon {
		margin-left: 12rpx;
	}

	.shopMsgBox {
		position: absolute;
		top: 25rpx;
		left: 25rpx;
		width: 700rpx;
		border-radius: 12.82rpx 12.82rpx 12.82rpx 12.82rpx;
		background: #ffffff;
		box-shadow: 0 0 13.46rpx 0 #095a8b30;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 29rpx 30rpx;
		box-sizing: border-box;

		.shopMsgBoxLeft {
			display: flex;
			align-items: center;
			font-weight: 500;
			font-size: 33.33rpx;
			color: #1C2027;

			.shopMsgNum {
				margin-left: 13rpx;
				width: 98.08rpx;
				height: 35.26rpx;
				background: url('/static/home/tuijian.png') no-repeat center;
				background-size: 100% 100%;
				font-size: 21.79rpx;
				font-weight: 400;
				color: #141E36;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 10rpx 0 0 10rpx;
				box-sizing: border-box;
			}
		}

		.shopMsgBoxRight {
			font-size: 24.36rpx;
			font-weight: 400;
			color: #5E606F;
			display: flex;
			align-items: center;

			.shopMsgBoxBotom {
				width: 20.51rpx;
				height: 20.51rpx;
				background: #f4f6f9;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-left: 11rpx;
			}
		}
	}

	.mapBtnClick {
		position: absolute;
		bottom: calc(env(safe-area-inset-bottom) + 120rpx);
		right: 10rpx;

		.mapBtnClickLi {
			width: 71rpx;
			height: 71rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}


	.custom-callout {
		position: absolute;
		top: 20%;
		left: 50%;
		transform: translateX(-50%);
		width: 395rpx;
		// width: 80%;
		z-index: 999;
	}

	.callout-content {
		background: #00BD86;
		border-radius: 12px;
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
	}

	.title {
		color: #ffffff;
		font-weight: 500;
		font-size: 24.36rpx;
		display: flex;
		align-items: center;
		padding: 14rpx 17rpx;
		box-sizing: border-box;
		white-space: normal !important;
		/* 关键：允许换行 */
		word-break: break-word;
		/* 长单词或 URL 换行 */
	}

	.callout-Shop {
		width: 25.64rpx;
		height: 23.08rpx;
		margin-right: 9rpx;
	}

	.descCont {
		background: #ffffff;
		border-radius: 12.82rpx 12.82rpx 12.82rpx 12.82rpx;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.desc {
		color: #666;
		font-size: 14px;
		margin-bottom: 10px;
		white-space: normal !important;
		/* 关键：允许换行 */
		word-break: break-word;
		/* 长单词或 URL 换行 */
	}

	.dh-btn {
		font-size: 24.36rpx;
		font-weight: 400;
		color: #0067FF;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.callout-Dh {
		width: 24.36rpx;
		height: 24.36rpx;
	}

	/* 订阅消息按钮样式 */
	.subscribe-btn {
		width: 100%;
		background: #1989fa;
		color: #ffffff;
		text-align: center;
		padding: 20rpx 0;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
		touch-action: manipulation;
		/* 防止双击缩放 */
		font-size: 28rpx;
	}

	.subscribe-btn:active {
		background: #0066cc;
		/* 点击时的背景色 */
	}

	.callout-image {
		width: 100%;
		height: 100px;
		border-radius: 8px;
		margin-bottom: 10px;
	}

	.no-data-tip {
		text-align: center;
		color: #999;
		font-size: 14px;
		padding: 30rpx 0;
	}

	.close-btn {
		float: right;
		width: 20px;
		height: 20px;
		text-align: center;
		line-height: 20px;
		background: #fff;
		border: 1px solid #ddd;
		border-radius: 50%;
		color: #999;
		font-size: 12px;
	}
</style>